<template>
	<view class="flex-col page">
		<view class="flex-col flex-auto group">
			<!-- <view class="flex-col justify-start items-center self-center ">
				<text class="font_1 text_2">LOGO</text>
			</view> -->
			<image src="/static/logo.jpg" mode="" class="text-wrapper"></image>
			<text class="self-center text_3">不拘坊市商户</text>
			<view class="flex-col input group_2 space-y-51">
				<text class="self-start font_2 text_4">手机号</text>
				<input type="text" class="text-wrapper_2" placeholder="请填写手机号" v-model="data.account">
			</view>
			<view class="flex-col group_2 space-y-51" style="margin-top: 30rpx;">
				<text class="self-start font_2 text_4">密码</text>
				<input type="text" class="text-wrapper_2" password placeholder="请填写密码" v-model="data.password">
			</view>
			<view class="flex-row justify-end pass" @click="toPass">
				忘记密码
			</view>
			<!-- <view class="flex-col group_3">
				<text class="self-start font_2 text_6">验证码</text>
				<view class="flex-row justify-between items-center input_2 group_4">
					<input type="text" class="font_3 text_7" placeholder="请填写验证码" v-model="data.password">
					<view class="flex-col justify-start button" @click="getCode">
						<text class="text_8" :style="!data.showText?'color:#999;':''">{{data.showText?'获取验证码':'重新获取'+data.second}}</text>
					</view>
				</view>
			</view> -->
			<view class="flex-col justify-start items-center button_2 text-wrapper_3" @click="getLogin">
				<text class="text_9">登录</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onShow
	} from "@dcloudio/uni-app";
	import {
		onMounted,
		ref,
		reactive,
		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	let shop_id = ref('')
	let content = ref({})
	let read = ref('')
	let statusNum = ref({})
	let data = ref({
		verein:true,
		openid:'',
		account:'',
		password:'',
		second: 60,
		showText: true,
		constants: {},
		invite_id:''
	})

	onShow((option) => {
		console.log(uni.getStorageSync('shop_id'),'shop_id');
		if (uni.getStorageSync('shop_id')) {
			shop_id.value = uni.getStorageSync('shop_id')
			uni.switchTab({
				url:'/pages/myOrder/myOrder'
			})
		} else {
			shop_id.value = ''
			// #ifdef H5
			console.log('h5');
			// toLogin()
			// #endif
		}
	})
	const getCode = () => { //倒计时
		proxy.$req.requestPOST(proxy.$api.VerifyInfo.getVerify, {
			account:data.value.account,
			unique_code:'register'
		}).then(res => {
			uni.showToast({
				title:res.message,
				icon:'none'
			})
			if (res.flag == "success") {
				data.value.showText = false
				var interval = setInterval(() => {
					let times = --data.value.second
					data.value.second = times < 10 ? '0' + times : times //小于10秒补 0
				}, 1000)
				setTimeout(() => {
					clearInterval(interval)
					data.value.second = 60
					data.value.showText = true
				}, 60000)
			}
		})
		
	}
	const toPass=()=>{
		uni.navigateTo({
			url:'/pages/password/password'
		})
	}
	const getLogin = () => {
		proxy.$req.requestPOST(proxy.$api.PassportInfo.login, {
			account:data.value.account,
			password:data.value.password,
		}).then(res => {
			uni.showToast({
				title:res.message,
				icon:'none'
			})
			if (res.flag == "success") {
				uni.setStorageSync('shop_id',res.data.shop_id)
				setTimeout(()=>{
					uni.switchTab({
						url:'/pages/myOrder/myOrder'
					})
				},1000)
			}
		})
	}
	const toYonghu = (type) => {
		uni.navigateTo({
			url: '/pages/yonghuxieyi/yonghuxieyi?type=' + type
		})
	}
	const getQueryVariable = (variable) => {
		var query = window.location.search.substring(1);
		var vars = query.split("&");
		for (var i = 0; i < vars.length; i++) {
			var pair = vars[i].split("=");
			if (pair[0] == variable) {
				return pair[1];
			}
		}
		return (false);
	}
	const toLogin = () => {
		let code = getQueryVariable('code')
		if (code) {
			let member_sn = getQueryVariable('state')
			console.log(code);
			proxy.$req.requestPOST(proxy.$api.PassportInfo.openidForCode, {
				code
			}).then(res => {
				console.log(res);
				if (res.flag === "success") {
					data.value.openid=res.data.openid
				} else {
					console.log(res.message);
					if (res.message.indexOf('invalid code') != -1 || res.message.indexOf('code been used') != -
						1) {
						let mainstate = Math.random()
						let url = encodeURIComponent('http://libc-ddanmo-api.uuudoo.com/shop/#/pages/login/login') //这里的是回调地址要与申请的地址填写一致
						let httpsUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxc4f5144cd4a7f83b&redirect_uri=${url}
								&response_type=code&scope=snsapi_userinfo&state=${mainstate}&connect_redirect=1#wechat_redirect`
						window.location.replace(httpsUrl)
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				}
			})
		} else {
			let appid = "wxc4f5144cd4a7f83b" //项目appid
			let mainstate = Math.random()
			// let url = encodeURIComponent('http://m.9tenclub.com/user/#/pages/mine/mine') //这里的是回调地址要与申请的地址填写一致
			let url = encodeURIComponent('http://libc-ddanmo-api.uuudoo.com/shop/#/pages/login/login') //这里的是回调地址要与申请的地址填写一致
			//state：用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击）可设置为简单的随机数加session进行校验
			let httpsUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${url}
					&response_type=code&scope=snsapi_userinfo&state=${mainstate}&connect_redirect=1#wechat_redirect`
			window.location.replace(httpsUrl)
			// window.location.replace =
		}
	}
</script>
<style scoped lang="scss">
	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.group {
			padding: 122rpx 0 68rpx;
			overflow-y: auto;

			.text-wrapper {
				border-radius: 40rpx;
				width: 178rpx;
				height: 178rpx;
				margin: 0 auto;
			}

			.text_3 {
				margin-top: 42rpx;
				color: #333333;
				font-size: 40rpx;
				font-family: PingFangSC;
				line-height: 39rpx;
			}

			.input {
				margin-top: 87rpx;
			}
			.text_4 {
				line-height: 29rpx;
			}
			
			.text-wrapper_2 {
				margin-top: 45rpx;
				padding-bottom: 40rpx;
				border-bottom: solid 2rpx #f7f7f7;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
			}

			.group_2 {
				padding: 0 60rpx;
			}

			.space-y-51 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-top: 51rpx;
				}
			}
			.pass{
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 24rpx;
				margin-top: 28rpx;
				padding: 0 60rpx;
			}
			.group_3 {
				margin-top: 61rpx;
				padding-left: 60rpx;
				padding-right: 53rpx;

				.text_6 {
					line-height: 28rpx;
				}

				.input_2 {
					margin-top: 45rpx;

					.text_7 {
						line-height: 26rpx;
					}

					.button {
						padding: 7rpx 0;
						border-left: solid 1rpx #f6f4f4;

						.text_8 {
							margin-left: 25rpx;
							color: #74b72e;
							font-size: 29rpx;
							font-family: PingFangHeiTC;
							line-height: 27rpx;
						}
					}
				}

				.group_4 {
					padding-bottom: 32rpx;
					border-bottom: solid 2rpx #f7f7f7;
				}
			}

			.font_2 {
				font-size: 30rpx;
				font-family: PingFangSC;
				color: #333333;
			}

			.font_3 {
				font-size: 28rpx;
				font-family: PingFangHeiTC;
				line-height: 27rpx;
				color: #111;
			}

			.button_2 {
				align-self: center;
				margin-top: 60rpx;

				.text_9 {
					color: #ffffff;
					font-size: 33rpx;
					font-family: PingFangSC;
					line-height: 32rpx;
				}
			}

			.text-wrapper_3 {
				padding: 33rpx 0;
				background-color: #54bc6e;
				border-radius: 24rpx;
				width: 630rpx;
			}

			.checkbox {
				position: fixed;
				bottom: 40rpx;
				left: 80rpx;

				.image_7 {
					width: 26rpx;
					height: 26rpx;
				}

				.group_6 {
					line-height: 23rpx;
					height: 23rpx;

					.font_4 {
						font-size: 25rpx;
						font-family: PingFang SC;
						line-height: 23rpx;
					}

					.text_10 {
						color: #999999;
					}

					.text_11 {
						color: #54bc6e;
					}
				}
			}

			.group_5 {
				padding-left: 24rpx;
			}

			.space-x-10 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-left: 10rpx;
				}
			}
		}
	}
</style>